<template>
  <div class="page-bg">
    <editPage @subForm="subForm" v-loading="loading">
      <el-tabs v-model="tabs.active">
        <el-tab-pane label="页面内容编辑" name="basic">
          <div class="flex c1">
            <form-item name="菜单名称">
              <el-input
                placeholder="请输入"
                maxlength="50"
                v-model="formData.cn_name"
                show-word-limit
              />
            </form-item>
            <form-item name="链接">
              <el-input
                placeholder="请输入"
                maxlength="50"
                v-model="formData.url"
                show-word-limit
              />
            </form-item>
          </div>
          <div class="flex c1">
            <form-item name="排序（数字越大越靠前，0最小）">
              <el-input
                placeholder="请输入"
                type="number"
                maxlength="7"
                v-model="formData.sort"
                show-word-limit
              />
            </form-item>
            <form-item name="跳转方式">
              <el-select v-model="formData.jump" placeholder="请选择">
                <el-option label="当前窗口打开" value="default"></el-option>
                <el-option label="新窗口打开" value="_blank"></el-option>
                <el-option label="uniapp跳转" value="navigateTo"></el-option>
              </el-select>
            </form-item>
          </div>

          <form-item name="banner图">
            <form-img
              v-model="formData.img"
              @pickImg="pickImg('img', $event)"
              width="380"
            />
          </form-item>

          <form-item name="自定义页面内容">
            <editor ref="editorRef" @selectImg="pickImg('editor')" />
          </form-item>

          <form-item name="是否显示">
            <el-switch
              active-value="1"
              inactive-value="0"
              v-model="formData.a_show"
              active-text="显示"
              inactive-text="隐藏"
            >
            </el-switch>
          </form-item>
        </el-tab-pane>
        <el-tab-pane label="SEO内容编辑" name="seo">
          <form-item name="页面标题">
            <el-input
              v-model.trim="formData.title"
              type="textarea"
              placeholder="请输入(选填)"
            ></el-input>
          </form-item>
          <form-item name="seo关键词">
            <el-input
              v-model.trim="formData.keywords"
              type="textarea"
              placeholder="请输入(选填)"
            ></el-input>
          </form-item>
          <form-item name="seo描述">
            <el-input
              v-model.trim="formData.description"
              type="textarea"
              placeholder="请输入(选填)"
            ></el-input>
          </form-item>
        </el-tab-pane>
      </el-tabs>
    </editPage>

    <layer-img v-model="imgOption.show" @getImg="getImg" />
  </div>
</template>

<script lang="ts">
export default {
  name: "PagesEdit",
};
</script>

<script setup lang="ts">
import editPage from "@/components/edit-page.vue";
import formItem from "@/components/form-item.vue";
import layerImg from "@/components/img/layer-img.vue";
import formImg from "@/components/img/form-img.vue";
import editor from "@/components/editor/index.vue";
import config from "@/common/config";
import { useImgHook } from "@/composition/useImgApi";
import { ElMessage } from "element-plus";
import { post } from "@/common/http";

const route = useRoute();
const router = useRouter();
const editorRef = ref<any>(null); //富文本
const loading = ref(false);
const queryID = route.query?.id; //页面参数
const typesList = ref<[any]>(); //分类列表

const tabs = reactive({
  active: "basic",
});
const formData = ref<any>({
  cn_name: "",
  type: "",
  url: "",
  sort: "",
  type_id: 1,
  img: "",
  a_show: "1",
  keywords:'',
  description:'',
});

onMounted(() => {
  //获取下拉分类列表
  post("api/Common/type_list_data", {
    type: "pages",
    page: 1,
    limit: 99999,
  }).then((res) => {
    typesList.value = res.data;
  });
  if (queryID) {
    //获取编辑详情
    loading.value = true;
    post("api/Page/get_detail", { id: queryID }).then((res) => {
      formData.value = res.data.details;
      formData.value.img = res.data.details.img;

      //编辑器默认值
      editorRef.value.content = res.data.details.content;
      loading.value = false;
    });
  }
});

const { imgOption, pickImg } = useImgHook();

//获取弹窗选择的图片
function getImg(data: any) {
  //单图上传
  if (imgOption.option.name === "img") {
    formData.value.img = data.imgUrl;
  }

  //编辑器图片上传
  if (imgOption.option.name === "editor") {
    //编辑器选择图片
    editorRef.value.editorObj.execCommand(
      "inserthtml",
      `<p><img style='max-width:100%' src='${
        config.serverImg + data.imgUrl
      }'/></p>`
    );
  }
}

//提交
function subForm() {
  let data = toRaw(formData.value);
  if (!data.cn_name) return ElMessage.error("请输入页面标题");
  if (!data.url) return ElMessage.error("请输入跳转链接");
  data.content = editorRef.value.content;
  if (queryID) data.id = queryID;
  post("api/Page/saveData", data).then((res) => {
    ElMessage.success(res.msg);
    setTimeout(() => {
      router.push("/pages/list");
    }, 1000);
  });
}
</script>

<style lang="scss" scoped>
.c1 > div {
  margin-right: 50px;
}
</style>
